<template>
  <div>
    <!-- 侧边栏展开后，将展开按钮隐藏 -->
    <button v-if="!isExpanded" @click="toggleSidebar" class="toggle-button">
      打开侧边栏
    </button>
    <div :class="['sidebar-container', { 'sidebar-hidden': !isExpanded }]">
      <!-- 添加关闭按钮在右上角 -->
      <div class="sidebar">
        <nav v-if="isExpanded">
          <button class="close-button" @click="toggleSidebar">&times;</button>
          <ul>
            <li v-for="(item, index) in menuItems" :key="index">
              <router-link :to="item.link">{{ item.label }}</router-link>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>

  
  <script>
export default {
  data() {
    return {
      isExpanded: false, // 初始状态关闭
      menuItems: [
        { label: "卫星云图", link: "/yuntu" },
        { label: "雷暴大风识别", link: "/Recognition" },
        { label: "雷暴大风外推", link: "/Rectangle" },
        { label: "雷暴大风潜势预警", link: "/convectivegust" },
        { label: "强降水预警", link: "/strongrain" },
        { label: "雷达拼图", link: "/radarPic" },
        { label: "降水", link: "/Rainfall" },
        { label: "DBZ", link: "/Radar" },
        { label: "QPE", link: "/qpe" },
      ],
    };
  },
  methods: {
    toggleSidebar() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>
  
  <style scoped>
.sidebar-container {
  position: fixed;
  top: 30px;
  right: 0;
  width: 150px;
  height: 83%;
  transition: width 0.3s ease;
  background-color: #f0f0f0;
}

.sidebar-hidden {
  width: 0px;
  height: 0px; /* 设置高度与按钮一样 */
}
.sidebar {
  background-color: #ffffff; /* 白色背景 */
  color: #333; /* 文本颜色，这里假设你希望文本是深灰色 */
  height: 100%;
  overflow-y: auto;
  border: 3px solid #007bff; /* 蓝色边框 */
  border-radius: 10px; /* 圆角边框 */
  font-weight: bold; /* 加粗文本 */
  text-decoration: none; /* 去掉下划线 */
  color: black; /* 设置字体颜色为黑色 */
  font-size: 18px; /* 设置字体大小为18像素，根据需要进行调整 */
}
.sidebar a {
  font-weight: bold; /* 加粗文本 */
  text-decoration: none; /* 去掉下划线 */
  color: black; /* 设置字体颜色为黑色 */
  font-size: 18px; /* 设置字体大小为18像素，根据需要进行调整 */
}

.sidebar ul li {
  padding: 25px 0; /* 调整上下内边距，可以根据需要进行进一步调整 */
}

.toggle-button {
  position: fixed;
  bottom: 150px;
  right: 20px; /* 修改为 left 来放在左下角 */
  width: 100px; /* 设置按钮宽度为20px */
  padding: 10px; /* 调整按钮内部的内边距 */
  background-color: #fff; /* 背景色改为白色 */
  color: black; /* 将字体颜色设置为黑色 */
  border: 2px solid #007bff; /* 修改为深蓝色的边框 */
  border-radius: 5px;
  cursor: pointer;
}

.icon {
  font-size: 20px;
}

.icon-chevron-left::before {
  content: "←";
}

.icon-chevron-right::before {
  content: "→";
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  padding: 10px;
}

router-link {
  text-decoration: none;
  color: #fff;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px;
  background-color: white; /* 将背景颜色设置为白色 */
  border: none;
  font-size: 20px;
  color: black; /* 将叉的颜色设置为黑色 */
  cursor: pointer;
}

.close-button:hover {
  background-color: red; /* 鼠标悬停时背景颜色变为红色 */
  color: #ffffff; /* 鼠标悬停时字体颜色变为白色 */
}

.icon-close::before {
  content: "×"; /* 使用“×”符号作为关闭按钮图标 */
  font-size: 20px;
}

.sidebar ul li:hover {
  background-color: #007bff; /* 鼠标悬停时的背景颜色 */
  color: #fff; /* 鼠标悬停时的文本颜色 */
}
</style>
  